<%--
  Created by IntelliJ IDEA.
  User: 饿熊的咆哮
  Date: 2021/10/27
  Time: 18:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="book" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>图片搜索</title>
    <script src="http://47.100.102.177:8080/app/js/common/jquery.min.js"></script>
    <script src="http://47.100.102.177:8080/app/js/common/jquery-1.12.4.js"></script>
    <script src="../../boot/plugin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../boot/plugin/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../boot/plugin/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/common/nav.css" />
</head>
<style>
    #test10{
        margin-top: 40px;
        margin-left: 600px;
    }
</style>
<body>
<!--定义头部-->
<div class='nav'>
    <ul>
        <li><img src="http://47.100.102.177:8080/app/images/common/素材-大书.png"></li>
        <li><a id="first">主页</a></li>
        <li><a href='#'>分类</a>
            <ul>
                <li><a href='../index01'>图书</a></li>
                <li><a href='../index02'>电子书</a></li>
            </ul>
        </li>
        <book:if test="${user!=null}">
            <li><a href='#'>${user.uname}</a>
                <ul>
                    <li><a href='../car/shoppingcar?account=${user.account}'>购物车</a></li>
                    <li><a href='../personal/center?status=1'>个人信息</a></li>
                    <li><a href='../order/order'>订单信息</a></li>
                </ul>
            </li>
            <li><a href="/boot/users/exit">安全退出</a></li>
        </book:if>
        <li><a href='../login'>登陆</a></li>
        <li><a href='../login'>注册</a></li>
    </ul>
</div>
<div id="test10"  class="layui-upload-drag">
    <div class="layui-hide" id="uploadDemoView">
        <img src="" alt="上传成功后渲染" class="imge">
    </div>
    <p>请上传你要搜索的图片</p>
    <div class="layui-progress" lay-filter="demo" id="hid">
        <div class="layui-progress-bar" lay-percent="0%"></div>
    </div>
</div>
<div id="picBook" style="margin-top: 20px;width: 100%;padding: 20px 50px">

</div>
<span class="layui-layer-shad"></span>
<script>
    let bookTypeId = ${param.bookType};
    let url = '';
    if(bookTypeId=="1"){
        url='/boot/search/findImgBook';
    }else {
        url='/boot/search/findImgEBook';
    }
    let h=document.getElementById("hid");
    $(function(){
        layui.use(['upload', 'element', 'layer'], function(){
            var $ = layui.jquery
                ,upload = layui.upload
                ,element = layui.element
                ,layer = layui.layer;

            //拖拽上传
            upload.render({
                elem: '#test10'
                ,before:function (obj){
                    layer.load(
                        2,
                        {shade:false}
                    );
                }
                ,url: url //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                ,done: function(res){
                    layer.msg('搜索成功');
                    element.progress('demo','100%');
                    let str = "";
                    let picBook = document.getElementById("picBook");
                    if(bookTypeId=="1"){
                        if(res!=null&&res[0]!=null){
                            for (let i = 0;i<res.length;i++){
                                str += '<div style="float:left;width: 210px;height: 320px;border:1px solid #999;border-radius:3px;margin-left: 20px;margin-top: 20px;padding: 5px;" onclick="jumpBook('+res[i].bkId+')">';
                                str += '<div style="width: 100%;height: 200px;background-image: url('+res[i].pictureUrl+');background-size: cover;"></div>';
                                str += '<div style="width: 100%;height: 60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height: 60px;">'+res[i].title+'</div>';
                                str += '<div style="width: 100%;height: 60px;color: red;line-height: 60px;text-align: right;">单价:'+res[i].price+'</div>';
                                str += '</div>';
                            }
                            layer.closeAll("loading");
                        }else {
                            str += '<div>查询为空</div>';
                            layer.closeAll("loading");
                        }
                    }else {
                        if(res!=null&&res[0]!=null){
                            for (let i = 0;i<res.length;i++){
                                str += '<div style="float:left;width: 210px;height: 320px;border:1px solid #999;border-radius:3px;margin-left: 20px;margin-top: 20px;padding: 5px;" onclick="jumpEBook('+res[i].ebkId+')">';
                                str += '<div style="width: 100%;height: 200px;background-image: url('+res[i].pictureUrl+');background-size: cover;"></div>';
                                str += '<div style="width: 100%;height: 60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height: 60px;">'+res[i].title+'</div>';
                                str += '<div style="width: 100%;height: 60px;color: red;line-height: 60px;text-align: right;">单价:'+res[i].price+'</div>';
                                str += '</div>';
                            }
                            layer.closeAll("loading");
                        }else {
                            str += '<div>查询为空</div>';
                            layer.closeAll("loading");
                        }
                    }


                    picBook.innerHTML = str;

                }
            });
        });
    });

    function jumpBook(bkId){
        window.location='/boot/detail/book?bookId='+bkId;
    }

    function jumpEBook(ebkId){
        window.location='/boot/detail/ebook?ebookId='+ebkId;
    }
</script>
</body>
</html>
